<template>
  <div class="app-container">

    <!-- 表格 -->
    <el-table v-loading="loading" :data="list" border>
      <el-table-column
        label="音色ID"
        prop="voiceId"
        align="center"
        width="550px"
      />

      <el-table-column label="创建时间" prop="gmtCreate" align="center" />

      <el-table-column label="修改时间" prop="gmtModified" align="center" />

      <el-table-column label="状态" prop="status" align="center">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status === 'OK'"
            >已通过</el-tag
          >
          <el-tag type="warning" v-else-if="scope.row.status === 'DEPLOYING'"
            >审核中</el-tag
          >
          <el-tag type="danger" v-else>未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="danger"
            icon="Delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-if="total > 0"
      :total="total"
      v-model:page="queryParams.page"
      v-model:limit="queryParams.size"
      @pagination="getList"
    />

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  listCreatedVoices,
} from "@/api/system/cozyvoiceModel"; 

const loading = ref(false);
const total = ref(0);
const list = ref([]);

// 分页和搜索参数
const queryParams = reactive({
  page: 1,
  size: 10,
  voiceName: "",
  voiceCode: "",
  modelCode: "",
});

// 页面初始化
onMounted(() => {
  getList();
});

// 获取音色列表

async function getList() {
  loading.value = true;
  try {
    const res = await listCreatedVoices({
      pageIndex: queryParams.page - 1,
      pageSize: queryParams.size,
      prefix: queryParams.voiceCode || "",
    });

    if (res.code === 0 || res.code === 200) {
      list.value = res.data.voices || [];
      total.value = Number(res.data.total) || 0;
    }
  } finally {
    loading.value = false;
  }
}

// 删除
function handleDelete(row) {
  ElMessageBox.confirm("确认删除该音色吗？", "提示", { type: "warning" })
    .then(async () => {
      const res = await deleteVoice(row.id);
      if (res.code === 200) {
        ElMessage.success("删除成功");
        getList();
      } else {
        ElMessage.error(res.msg || "删除失败");
      }
    })
    .catch(() => {});
}



</script>
